<template>
  <el-scrollbar class="view">
    <div class="cl-crud">
      <el-row>
        <el-button>刷新</el-button>
        <el-button class="add">新增</el-button>
        <el-button @click="dialogFormVisible = true">自定义表单</el-button>
        <el-dialog
          :visible.sync="dialogFormVisible"
          :show-close="false"
          :fullscreen="isfullScreen"
        >
          <div slot="title" class="cl-dialog__header">
            <span class="cl-dialog__title">内嵌crud</span>
            <div class="cl-dialog__controls">
              <button class="maximize" @click="isfullScreen = !isfullScreen">
                <i class="el-icon-full-screen" v-if="!isfullScreen"></i>
                <i class="el-icon-minus" v-else></i>
              </button>
              <button class="close" @click="dialogFormVisible = false">
                <i class="el-icon-close"></i>
              </button>
            </div>
          </div>
          <el-row>
            <el-button type="primary" @click="AddVisible = true">新增</el-button>
            <el-button type="danger">删除</el-button>
            <div class="cl-search-key">
              <el-input
                v-model="input_dia"
                class="el-input__wrapper"
                placeholder="请输入关键字"
              ></el-input>
              <el-button class="search">搜索</el-button>
            </div>
          </el-row>

          <el-table :data="tableData" border style="width: 100%" :key="timeStamp">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="date" label="日期" width="150"> </el-table-column>
            <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="scope">
                <el-button
                  slot="reference"
                  type="text"
                  size="small"
                  @click="deleteRow(scope.$index, tableData)"
                  >删除</el-button
                >
                <el-button type="text" size="small" @click="editGroup(scope)"
                  >编辑</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="success" @click="dialogFormVisible = false">确 定</el-button>
          </div>
        </el-dialog>
        <el-dialog :visible.sync="EditVisible" :fullscreen="isfullScreen">
          <el-input v-model="newname"></el-input>
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="newdate"
            style="width: 100%"
            value-format="yyyy-MM-dd"
          ></el-date-picker>

          <br />
          <el-button @click="EditVisible = false">取消</el-button>
          <el-button @click="sureEdit">确定</el-button>
        </el-dialog>
        <el-dialog :visible.sync="AddVisible" :fullscreen="isfullScreen">
          <el-input v-model="newname"></el-input>
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="newdate"
            style="width: 100%"
            value-format="yyyy-MM-dd"
          ></el-date-picker>

          <br />
          <el-button @click="AddVisible = false">取消</el-button>
          <el-button @click="Addsure">确定</el-button>
        </el-dialog>
        <div class="cl-filter">
          <span class="cl-filter__label">字典筛选</span>
          <el-select v-model="value" clearable placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="cl-flex1"></div>
        <div class="cl-column-custom__wrap">
          <el-button type="button" @click="dialogColVisible = true">自定义列</el-button>

          <el-dialog
            :visible.sync="dialogColVisible"
            :show-close="false"
            :fullscreen="isfullScreen"
          >
            <div slot="title" class="cl-dialog__header">
              <span class="cl-dialog__title">自定义列</span>
              <div class="cl-dialog__controls">
                <button class="maximize" @click="isfullScreen = !isfullScreen">
                  <i class="el-icon-full-screen" v-if="!isfullScreen"></i>
                  <i class="el-icon-minus" v-else></i>
                </button>
                <button class="close" @click="dialogColVisible = false">
                  <i class="el-icon-close"></i>
                </button>
              </div>
            </div>
            <div class="cl-dialog__container">
              <el-checkbox-group v-model="checkList">
                <el-checkbox label="姓名"></el-checkbox>
                <el-checkbox label="存款"></el-checkbox>
                <el-checkbox label="状态"></el-checkbox>
                <el-checkbox label="创建时间"></el-checkbox>
              </el-checkbox-group>
            </div>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogColVisible = false">取 消</el-button>
              <el-button type="success" @click="dialogColVisible = false"
                >确 定</el-button
              >
            </div>
          </el-dialog>
        </div>
        <div class="cl-search-key">
          <el-input
            v-model="input"
            class="el-input__wrapper"
            placeholder="请输入关键字"
          ></el-input>
          <el-button class="search">搜索</el-button>
        </div>
      </el-row>
      <el-row>
        <el-table
          v-loading="true"
          height="370px"
          :lazy="true"
          :data="tableData2"
          style="width: 100%"
          max-height="539px"
        >
          <el-table-column fixed prop="name" label="姓名" width="150"> </el-table-column>
          <el-table-column prop="savemoney" label="存款" width="120"> </el-table-column>
          <el-table-column prop="status" label="状态" width="120"> </el-table-column>
          <el-table-column fixed="right" label="操作" width="120">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="deleteRow(scope.$index, tableData)"
                type="text"
                size="small"
              >
                移除
              </el-button>
            </template>
          </el-table-column>
          <div slot="empty"></div>
        </el-table>
      </el-row>
      <el-row>
        <div class="cl-flex1"></div>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 40, 50, 100]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="0"
        >
        </el-pagination>
      </el-row>
    </div>
  </el-scrollbar>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "COOL",
        },
        {
          value: "选项2",
          label: "闪酷",
        },
      ],
      tableData: [
        {
          date: "2016-05-02",
          name: "gh",
        },
        {
          date: "2016-05-04",
          name: "xsb",
        },
        {
          date: "2016-05-01",
          name: "zjj",
        },
        {
          date: "2016-05-03",
          name: "xx",
        },
        {
          date: "2016-05-03",
          name: "xxx",
        },
      ],
      tableData2: [],
      value: "",
      input: "",
      input_dia: "",
      dialogFormVisible: false,
      checkList: ["姓名", "存款", "状态", "创建时间"],
      isfullScreen: false,
      dialogColVisible: false,
      EditVisible: false,
      editRow: {},
      editIndex: null,
      newname: "",
      newdate: "",
      newObj: {
        name: "",
        date: "",
      },
      timeStamp: null,
      AddVisible: false,
    };
  },
  methods: {
    editGroup(scope) {
      this.editRow = {
        ...scope.row,
      };

      //显示编辑框
      this.EditVisible = true;
      //当前临时被编辑的文本
      this.newdate = scope.row.date;
      this.newname = scope.row.name;
      // 编辑的行
      this.editIndex = scope.$index;
    },
    sureEdit() {
      //修改编辑行的note

      this.editRow.date = this.newdate;
      this.editRow.name = this.newname;
      console.log(this.editRow);
      this.tableData[this.editIndex] = this.editRow;
      this.timeStamp = new Date().getTime();
      this.EditVisible = false;
      this.newdate = "";
      this.newname = "";
      console.log(this.tableData);
    },
    Addsure() {
      let name = this.newname;
      let date = this.newdate;
      console.log(name, date);
      this.newObj = {
        name: name,
        date: date,
      };
      if(name==null){
        return false
      }else{
        this.tableData.push(this.newObj)
        this.newdate = "";
      this.newname = "";
        this.AddVisible=false;
      }
      
    },
    deleteRow(index, rows) {
      let t = confirm("确定要删除当前行吗");
      if (t) {
        rows.splice(index, 1);
      }
      console.log(index, rows);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
  watch: {
    tableData: {
      handler() {},
      deep: true,
    },
  },
};
</script>
<style lang="scss">
.cl-crud > .el-row {
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
  padding-bottom: 5px;
  margin-bottom: 0;
}
.add,
.search {
  background-color: #4165d7;
  color: #fff;
}
.el-row {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  box-sizing: border-box;
}
.cl-filter {
  display: flex;
  align-items: center;
  margin: 0 10px;
}
.cl-filter__label {
  font-size: 12px;
  margin-right: 10px;
  white-space: nowrap;
}
.cl-filter .el-select {
  min-width: 120px;
}
.el-dialog__header {
  padding: 0;
  text-align: center;
  border-bottom: 1px solid #f7f7f7;
  margin-right: 0;
}
.cl-dialog__header {
  position: relative;
  padding: 10px;
}
.cl-dialog__title {
  display: block;
  font-size: 15px;
  text-align: center;
  letter-spacing: 0.5px;
}
.cl-dialog__controls {
  display: flex;
  justify-content: flex-end;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 9;
  width: 100%;
}
.cl-dialog__controls .close,
.cl-dialog__controls .maximize,
.el-icon-minus {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  border: 0;
  background-color: transparent;
  cursor: pointer;
  outline: none;
  i {
    font-size: 18px;
  }
}
.cl-search-key {
  display: flex;
  margin-left: 10px;
  .el-button {
    margin-left: 10px;
  }
}
.cl-flex1 {
  flex: 1;
  font-size: 12px;
}
</style>
